<template>
	<view class="min-vh-80 flex flex-column flex-x-center">
		<view class="p-4 flex-2 flex flex-center">
			<view class="text-center" v-if="state === null">
				<uni-icons type="locked" color="var(--xl-primary)" size="120" />
				<view class="h1 font-weight-600 my-10">申请开通分销权限</view>
				<view class="pt-4 h9 text-dark-light-5">申请开通分销权限后，您可以通过分享链接或二维码的方式推广本平台，推广成功后，您将获得相应的分销奖励
				</view>
				<view class="pt-4 h8 text-error font-weight-600"
					v-if="config.apply_refund === 'no' && config.apply_price > 0">{{
						config.apply_refund_text }}</view>
				<view class="pt-10">
					<button v-if="config.apply_price > 0" size="large" class="btn-primary"
						@click="applyDeaaler">支付(￥{{
							config.apply_price }}元)申请开通</button>
					<button v-else size="large" @click="applyDeaaler" class="btn-primary">申请开通</button>
				</view>
			</view>
			<view class="text-center" v-else-if="state === 0">
				<uni-icons type="locked" color="var(--xl-primary)" size="120" />
				<view class="h1 font-weight-600 my-10">等待后台审核开通分销权限</view>
				<view class="pt-4 h9 text-dark-light-5">申请开通分销权限后，您可以通过分享链接或二维码的方式推广本平台，推广成功后，您将获得相应的分销奖励
				</view>
				<view class="pt-4 h8 text-error font-weight-600"
					v-if="config.apply_refund === 'no' && config.apply_price > 0">{{
						config.apply_refund_text }}</view>
				<view class="pt-10">
					<button class="btn-dark-light-7" size="large">等待后台审核</button>
				</view>
			</view>
			<view class="text-center" v-else-if="state === 1">
				<uni-icons type="checkmarkempty" color="var(--xl-primary)" size="120" />
				<view class="h1 font-weight-600 my-10">已获得分销权限</view>
				<view class="pt-4 h9 text-dark-light-5">申请开通分销权限后，您可以通过分享链接或二维码的方式推广本平台，推广成功后，您将获得相应的分销奖励
				</view>
			</view>
			<view class="text-center" v-else-if="state === 2">
				<uni-icons type="info-filled" color="var(--xl-primary)" size="120" />
				<view class="h1 font-weight-600 my-10">分销权限异常</view>
				<view class="pt-4 h9 text-dark-light-5">当前分销权限已被冻结，你不可进行操作，请联系管理员</view>
				<view class="pt-10">
					<button class="btn-danger" size="large">权限异常</button>
				</view>
			</view>
		</view>
		<view class="flex-1" />
		<x-pay v-model:show="payTypeShow" :orders-type="form.type" @confirm="payCallBack"
			:price="config.apply_price" />
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { useUserStore, usePlatformStore, useRefs } from '@/stores';
import { $page, $api, $message } from '@/utils';
import { onLoad,onShow } from "@dcloudio/uni-app";
import { $ResponseCode } from '@/utils/const/env';
import { usePay } from '@/utils/pay';
const userStore = useUserStore();
const { USERINFO } = useRefs(userStore);
const PlatformStore = usePlatformStore();
const { PLATFORM } = useRefs(PlatformStore);
const payTypeShow = ref(false);
const state = ref(null);
const config = ref({
	apply: 'yes',
	apply_price: '',
	apply_refund: '',
	apply_refund_text: '',
	level: 0,
	proportion: 0,
	proportion_level_1: 0,
	proportion_level_2: 0,
	proportion_level_3: 0,
})
const getDealer = () => {
	$api.Dealer.dealer().then((data: any) => {
		state.value = data.state;
		config.value = data.config;
	}).catch(() => {
	})
}
const applyDeaaler = () => {
	$api.Dealer.applyDealer().then((res: any) => {
		if (res.code === $ResponseCode.SUCCESS) {
			getDealer();
			$message.success(res.msg);
		} else if (res.code === $ResponseCode.NEED_PAY) {
			payTypeShow.value = true;
		} else {
			$message.error(res.msg);
		}
	}).catch(() => {
	})
}
const form = reactive({
	type: 'dealer_apply',
	pay_type: '',
	platform: '',
	code: ''
})
const payCallBack = (pay_type: any) => {
	if (pay_type) {
		form.pay_type = pay_type;
		uni.showLoading({
			title: '获取订单中...',
			mask: true
		})
		$api.Orders.create(form).then((res: any) => {
			if (res.code === $ResponseCode.SUCCESS) {
				setTimeout(() => {
					uni.showLoading({
						title: '查询中...',
						mask: true
					});
					usePay(res.data).then(() => {
						getDealer();
					}).catch((err: any) => {
						console.log(err);
						$message.error(err.msg);
					}).finally(() => {
						uni.hideLoading();
					});
				}, 300)
			} else if (res.code === $ResponseCode.PAY_SUCCESS) {
				getDealer();
			}
		}).catch((err: any) => {
			console.log(err);
			$message.error(err.msg);
		}).finally(() => {
			uni.hideLoading();
		})
	}
	payTypeShow.value = false;
}
onLoad(() => {
	form.platform = PLATFORM.value.platform;
	// #ifdef MP-WEIXIN
	wx.login({
		success: (res: any) => {
			if (res.code) {
				form.code = res.code;
			}
		},
		fail: () => {
			uni.showModal({
				title: '提示',
				content: '微信授权失败',
				showCancel: false,
				success: (res) => {
					if (res.confirm) {
						$page.back();
					}
				}
			});
		}
	})
	// #endif
	getDealer();
})
onShow(() => {
	getDealer();
})
</script>

<style lang="scss" scoped></style>